<template>
    <div class="componentSearchContainer">
        <span class="inputLabel">组件名称-英文</span>
        <el-input v-model="componentSearchData.componentName" placeholder="组件名称-英文" class="searchInfoInput"></el-input>

        <span class="inputLabel">组件名称-中文</span>
        <el-input v-model="componentSearchData.componentCnName" placeholder="组件名称-中文" class="searchInfoInput"></el-input>

        <span class="inputLabel">组件类型</span>
        <el-select v-model="componentSearchData.componentType" placeholder="组件类型" class="searchInfoInput" clearable>
            <el-option label="图标组件" value="ICON"/>
            <el-option label="通用组件" value="COMMON"/>
            <el-option label="自定义组件" value="CUSTOM"/>
        </el-select>

        <el-button type="primary" icon="SearchOutlined" :loading="searchLoading" class="searchButtonClass" @click="queryComponentInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script name="ComponentSearch" setup lang="ts">
import {componentInfoQueryNoContent} from "@/request/components";
import {computed, ref} from "vue";
import {useComponentManageStore} from "@/stores/lowcode/componentManage";

let searchLoading = ref(false);

let componentSearchData = computed(() => {return useComponentManageStore().componentSearchData});

function queryComponentInfo() {
    searchLoading.value = true
    componentInfoQueryNoContent(componentSearchData.value).then(res => {
        useComponentManageStore().resetComponentDataList(res.data);
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = false
    })
}

function resetInput() {
    useComponentManageStore().resetComponentSearchData({
        componentName: "",
        componentCnName: "",
        componentType: "",
        pageInfo: {
            pageIndex: 1,
            pageSize: 10
        }
    })
}
</script>

<style scoped lang="less">
.componentSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>